<style rel="stylesheet/scss" lang="scss" scoped>
    .pay-containter{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		background: rgba(0,0,0,.6);
		justify-content: center;
		align-items: center;
		z-index: 100;
		.pay-info{
			width: 542px;
			height: auto;
			background: #fff;
			overflow: hidden;
			transition: all .3s;
			border-radius: 5px;
			position: relative;
			display: flex;
			flex-direction: column;
		    box-shadow: 0 0 15px #4e4e4e;
			.alertTitle{
				border-top-left-radius: 3px;
				border-top-right-radius: 3px;
				display: flex;
				padding: 0 10px;
				align-items: center;
				background: #F0F0F0;
				color: #333;
				border-bottom: 1px solid #E5E5E5;
				span.icon-zuojiantou,span.icon-artboard1{
					font-size: 16px;
					cursor: pointer;
				}
				button.icon-zuojiantou{
					font-size: 16px;
					cursor: pointer;
				}
				h3 {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #333;
					font-weight: 10 !important;
				}
			}
			.paySuccess{
				flex: 1;
				display: flex;
				height: 200px;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}
			.pay-info_content{
				flex: 1;
				display: flex;
				flex-direction: column;
				.content-amount{
					width: 100%;
					height: 100px;
					background: #F0F0F0;
					display: flex;
					justify-content: center;
					align-items: center;
					.tet{
						color: #666;
						font-size: 14px;
					}
					.price{
						padding: 5px 20px;
						border-bottom: 1px solid #CCCCCC;
					}
					.icome-pay{
						font-size: 18px;
						font-weight: 400;
						color: #F20000;
						margin-left: -6px;
						.icon-money-text{
							font-size: 22px;
							font-style: normal;
						}
						.icon-money-num{
							font-size: 22px;
							font-style: normal;
						}
						>span{
							font-size: 32px;
							font-style: normal;
						}
					}
					
				}
				.loading{
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 10px 0;
					img{
						width: 16px;
					}
				}
			}
			.pay-info_type{
				width: 100%;
				height: auto;
				background: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				img{
					width: 160px;
					height: 160px;
				}
				.text-sliver{
					width: 100%;
					text-align: center;
					color: #666;
					height: 60px;
					line-height: 60px;
					font-size: 14px;
					font-weight: 100 !important;
				}
				.payWayInfo{
					display: flex;
					justify-content: center;
					align-items: flex-end;
					.payWayItem{
						>div{
							width: 124px;
							height: 46px;
							margin: 0 5px;
							border: 1px solid #ccc;
							border-radius: 5px;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 16px;
							margin-top: 3px;
							cursor: pointer;
							box-sizing: border-box;
							position: relative;
							transition: all .3s;
							span.icon{
								font-size: 32px;
								margin-right: 5px;
								height: 35px;
							}

							&.active{
								border: 3px solid #67c23a;
								overflow: hidden;
								padding-right: 10px;
							}

							&.active .check{
								position: absolute;
								width: 40px;
								height: 40px;
								background: #67c23a;
								right: -20px;
								bottom: -20px;
								transform: rotate(45deg);
								&::after{
									position: absolute;
								    content: "\e61a";
								    color: #fff;
								    bottom: 12px;
								    left: 9px;
								    transform: translateX(-50%) rotate(-46deg);
								}
							}
						}

					}
				}
				.text-small{
					font-size: 14px;
				}
				.pay-next{
					margin: 10px 0;
					display: flex;
					justify-content: center;
				}
			}
		}
		.animate-enter-active, .animate-leave-active {
		  transition:all .2s;
		  height: auto;
		  opacity: 1;
		  transform: translate3d(0,0,0);
		}
		.animate-enter, .animate-leave-to {
		  opacity: 0;
		  height: 0;
		  transform: translate3d(100%,0,0);
		  pointer-events: none;
		}
		.text-32{
			font-size: 40px;
			color: #67c23a;
		}
		
	}
    
</style>

<template>
	<div class="pay-containter" >
		
		<div class="pay-info" v-loading="loadingBox" element-loading-text="拼命加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<div class="alertTitle">
				<span class="iconfont icon-zuojiantou pointer ML-10" v-if="(payStep == 2 )" @click="nextStep(1)">切换支付方式</span>
				<h3>{{payStep == 3 ? '支付成功':'支付结算'}}</h3>
				<span class="iconfont icon-artboard1" @click="closePay"></span>
			</div>
			<!--选择支付方式模块-->
			<transition name="animate">
				<div class="pay-info_content" v-if="payStep == 1">
					<div class="content-amount">
						<span class="tet">总计：</span>
						<div class="price">
							<span class="icome-pay">
								<i class="icon-money-text">¥</i>
								<span>{{integer}}</span>
								<i class="icon-money-num">{{Fixes}}</i>
							</span>
						</div>
					</div>
					<div class="pay-info_type">
						<h3 class="text-sliver">———— 请选择支付方式 ————</h3>
						<div class="payWayInfo">
							<div class="payWayItem">
								<div :class="{'active':payType == 1}" @click="toggleType(1)">
									<span class="iconfont icon-weixin text-green icon"></span>微信
									<span class="check iconfont" v-if="payType == 1"></span>
								</div>
							</div>							
							<div class="payWayItem" >
								<div :class="{'active':payType == 2}" @click="toggleType(2)">
									<span class="iconfont icon-zhifubaozhifu text-cyan icon"></span>支付宝
									<span class="check iconfont" v-if="payType == 2"></span>
								</div>
							</div>
						</div>
						<div class="pay-next">
							<el-button  size="mini" type="success" @click="nextStep(2)">下一步</el-button>
						</div>
					</div>
				</div>
			</transition>
			<!--支付生成二维码-->
			<transition name="animate">
				<div class="pay-info_content" v-if="payStep == 2">
					<div class="content-amount">
						<span class="tet">总计：</span>
						<div class="price">
							<span class="icome-pay">
								<i class="icon-money-text">¥</i>
								<span>{{integer}}</span>
								<i class="icon-money-num">{{Fixes}}</i>
							</span>
						</div>
					</div>
					<div class="pay-info_type">
						<img :src="qrCode"/>
						<p class="text-small">
							请使用
							<span class="text-green" v-if="payType == 1">
								<span class="iconfont icon-weixinzhifu"></span>
								微信
							</span>
							<span class="text-cyan" v-if="payType == 2">
								<span class="iconfont icon-zhifubaozhifu"></span>
								支付宝
							</span>
							扫一扫付款
						</p>
					</div>
					<div class="loading text-small text-darkGrey" >
						<img :src="imgLoading"/>
						<span class="text-14">支付检测中</span>
					</div>
				</div>
			</transition>
			<!--支付成功的模块-->
			<transition name="animate">
				<div class="paySuccess" v-if="payStep == 3" >
					<div class="iconfont icon-duoxuanxuanzhong  text-32"></div>
					<p class="text-darkGrey text-small">您已成功支付<span class="text-red">{{payParams.amount}}</span>元，谢谢惠顾</p>
					<div class="btnGroup">
						<el-button class="" type="success" @click="closePay">关闭窗口({{closeWindowNum}}S)</el-button>
					</div>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
	/**
	 * @desc 公用支付弹窗 用法 需要传支付需要的参数payParams 只有支付成功了才会触发回调方法到外层组件 失败情况 当前模块会处理
	 */
	import imgLoading from '@/assets/loading.gif'
	export default {
		props: {
			// 支付需要的参数对象
			payParams: {
				required: true,
				type: Object
			}
		},
		data() {
			return {
				payType: 1,          					// 支付类型 1 是微信支付  2 是支付宝支付
				payStep: 1,										// 支付步骤 1 支付选择支付方式模板 2 支付生成二维码 3 支付成功  4 支付失败
				qrCode: '',										// 二维码图片
				imgLoading: imgLoading,				// loading动态图
				payTimer: null,								// 轮循时间
				orderId: '',									// 下单号
				loadingBox: false,						// loading 是否显示加载
				closeWindowNum: 4,						// 关闭窗口
				closeTimer: null,							// 关闭窗口定时器
			}
		},
		
		methods: {
			/**
			 * @desc 切换支付方式
			 * @param num 1 选择微信 2 选择支付宝
			 */
			toggleType(num) {
				this.payType = num
			},
			/**
			* @desc 跳转步骤
			* @param num 1 选择微信 2 选择支付宝
			*/
			 async nextStep(num) {
				if(num ==2 ) {
					this.loadingBox = true
					// 实时看用户的支付状态 调用接口获取二维码才跳转下一步
					await this.getQrCodeFn().then(res => {
						this.loadingBox = false
						if(res.status == 200){
							this.qrCode = res.data.qrcode
							this.payStep = num
							this.orderId = res.data.orderId
							// 得到二维码 轮循支付状态
							this.payStatusFn()
						}
					}).catch(err => {
						this.$message({
							type: 'error',
							message: err.message
						})
						this.loadingBox = false
					})
					return
				}else {
					this.payStep = num
					clearInterval(this.payTimer)
				}
			},
			/**
			* @desc 循环当前状态 3秒轮一次
			*/
			payStatusFn() {
				let payFlag = true
				clearInterval(this.payTimer)
				this.payTimer = setInterval(() => {
					if(payFlag) {
						// 请求后设置为true
						this.$ajax({
							api: 'merchant/transaction/checkStatus',
							params: {
								token: this.payParams.token,
								orderId: this.orderId,
								merchantUserId: this.payParams.merchantId,
							}
						}).then(res => {
							if(res.status === 200) {
								// 1支付成 0 待支付 2支付失败
								if(res.data.status == 1) {
									this.payStep = 3
									// 自动关闭支付窗口
									this.closeWindowFn()
									// 关闭当前轮循环
									clearInterval(this.payTimer)
								}
								if(res.data.status == 2) {
									this.payStep = 1
									this.$message({
										'message': '支付超时,请重新支付'
									})
									clearInterval(this.payTimer)
								}
							}
							payFlag = true
						}).catch(err => {
							this.$message({
								'message': err.message
							})
							clearInterval(this.payTimer)
						})
						payFlag = false
					}
				},3000)
			},
			closeWindowFn() {
				this.closeTimer = setInterval(() => {
					this.closeWindowNum--
					if (this.closeWindowNum <= 0) {
						this.closePay()
						clearInterval(this.closeTimer)
					}
				}, 1000)
			},
			/**
			* @desc 获取支付二维码
			*/
			getQrCodeFn() {
				return new Promise((reslove, reject) => {
					this.$ajax({
						api: 'merchant/transaction/createRecharge',
						params: {
							token: this.payParams.token,
							merchantUserId: this.payParams.merchantId,
							packageId: this.payParams.packageId,
							paymentMethod: this.payType == 1 ? 'wechat'	: 'alipay' 
						}
					}).then(res => {
						if(res.status === 200) {
							reslove({status: res.status,data: res.data})
						}
					}).catch(err => {
						reject({status: 500,message:err.message})
					})
				})
			},
			/**
			* @desc 关闭当前模块
			*/
			closePay() {
				this.$emit('closePay')
				if(this.payTimer) {
					clearInterval(this.payTimer)
				}
			}
		},
		computed: {
			/**
			 * @desc 过滤金额显示 如果当前包含点 截取点后面数字 否则数据后面追加.00
			 */
			Fixes() {
				let money = parseFloat(this.payParams.amount)
				let f = Math.floor(money * 100) / 100
				f = f.toFixed(2)
				let s = f.toString()
				let rs = s.indexOf('.')
				if (rs >= 0) {
					let fix = s.slice(rs)
					return fix
				} else {
					return ".00"
				}
			},
			// 返回金额
			integer() {
				let intMoney = window.parseInt(this.payParams.amount)
				if(isNaN(intMoney)){
					return 0
				}
				console.log(intMoney)
				return intMoney
			}
		}
	}
</script>